<script setup>
import {
    UserFilled,
    User,
    Crop,
    EditPen,
    Menu,
    GoodsFilled,
    Message,
    MessageBox,
    ShoppingBag,
    Goods,
    HomeFilled,
    Discount,
    Warning,
    CircleClose,
    Avatar,
    ChromeFilled,
    BellFilled,
    TrendCharts,
    Expand,
    Fold,
    Plus,
    Minus,
    CaretBottom,
    SwitchButton,
    Setting
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { userInfoService } from '@/api/user.js'
import { userInfoStore } from '@/stores/userInfo.js'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useTokenStore } from '@/stores/token.js'
import { ref, onMounted, computed } from 'vue'


const userInfo = userInfoStore()
const router = useRouter()
const tokenStore = useTokenStore()

// 获取用户信息
const getUserInfo = async () => {
    const res = await userInfoService()
    console.log(res)
    userInfo.setInfo(res.data)
}
getUserInfo()

// 退出登录
const handleCommand = (command) => {
    if (command === 'login') {
        ElMessageBox.confirm(
            '你确定要退出登录么?',
            '温馨提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                draggable: true,
            }
        )
            .then(async () => {
                tokenStore.removeToken()
                userInfo.removeInfo()
                ElMessage({
                    type: 'success',
                    message: '退出登录成功',
                })
                router.push('/login')
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消退出',
                })
            })
    } else {
        router.push('/admin/user/' + command)
    }
}

const isCollapse = ref(false)
const title = ref('超市库存管理系统')
const width = ref('240px')
const changeCollapse = () => {
    isCollapse.value = !isCollapse.value
    if (isCollapse.value) {
        width.value = '64px'
        title.value = ''
    } else {
        width.value = '240px'
        title.value = '超市库存管理系统'
    }
}

// 获取当前时间
const currentTime = ref('')
const updateTime = () => {
    const now = new Date()
    const hours = now.getHours().toString().padStart(2, '0')
    const minutes = now.getMinutes().toString().padStart(2, '0')
    const seconds = now.getSeconds().toString().padStart(2, '0')
    currentTime.value = `${hours}:${minutes}:${seconds}`
}

// 获取当前日期
const currentDate = computed(() => {
    const now = new Date()
    const year = now.getFullYear()
    const month = (now.getMonth() + 1).toString().padStart(2, '0')
    const day = now.getDate().toString().padStart(2, '0')
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    const weekday = weekdays[now.getDay()]
    return `${year}年${month}月${day}日 ${weekday}`
})

onMounted(() => {
    updateTime()
    setInterval(updateTime, 1000)
})
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside :width="width" class="aside-container">
            <div class="aside-logo">
                <img src="@/assets/logo.png" alt="Logo" class="logo-image" v-if="!isCollapse">
                <img src="@/assets/logo-small.png" alt="Logo" class="logo-small" v-else>
                <div class="logo-text" v-if="!isCollapse">{{ title }}</div>
            </div>
            <el-scrollbar>
                <el-menu 
                    active-text-color="#ffffff" 
                    background-color="transparent" 
                    text-color="#a0aec0" 
                    router
                    :collapse="isCollapse"
                    :unique-opened="true"
                    class="el-menu-vertical"
                >
                    <el-menu-item index="/admin/home" class="menu-item">
                        <el-icon><ChromeFilled /></el-icon>
                        <span>系统首页</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/stats" class="menu-item">
                        <el-icon><TrendCharts /></el-icon>
                        <span>数据分析</span>
                    </el-menu-item>
                    <el-sub-menu index="1" class="menu-sub">
                        <template #title>
                            <el-icon><GoodsFilled /></el-icon>
                            <span>商品管理</span>
                        </template>
                        <el-menu-item index="/admin/goodsMassage" class="sub-menu-item">
                            <el-icon><Goods /></el-icon>
                            <span>商品信息</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/goodsCategory" class="sub-menu-item">
                            <el-icon><ShoppingBag /></el-icon>
                            <span>商品分类</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2" class="menu-sub">
                        <template #title>
                            <el-icon><HomeFilled /></el-icon>
                            <span>库存管理</span>
                        </template>
                        <el-menu-item index="/admin/inventory" class="sub-menu-item">
                            <el-icon><HomeFilled /></el-icon>
                            <span>库存详情</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/stockIn" class="sub-menu-item">
                            <el-icon><Plus /></el-icon>
                            <span>入库管理</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/stockOut" class="sub-menu-item">
                            <el-icon><Minus /></el-icon>
                            <span>出库管理</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/Alerts" class="sub-menu-item">
                            <el-icon><Warning /></el-icon>
                            <span>库存预警</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/expiring" class="sub-menu-item">
                            <el-icon><CircleClose /></el-icon>
                            <span>临期商品</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/admin/orders" class="menu-item">
                        <el-icon><BellFilled /></el-icon>
                        <span>订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/vendor" class="menu-item">
                        <el-icon><Avatar /></el-icon>
                        <span>供应商管理</span>
                    </el-menu-item>
                    <el-menu-item v-if="userInfo.info.username == 'admin'" index="/admin/employeeManagement" class="menu-item">
                        <el-icon><Avatar /></el-icon>
                        <span>员工管理</span>
                    </el-menu-item>
                    <el-sub-menu index="3" class="menu-sub">
                        <template #title>
                            <el-icon><UserFilled /></el-icon>
                            <span>个人中心</span>
                        </template>
                        <el-menu-item index="/admin/user/info" class="sub-menu-item">
                            <el-icon><User /></el-icon>
                            <span>基本资料</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/user/avatar" class="sub-menu-item">
                            <el-icon><Crop /></el-icon>
                            <span>更换头像</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/user/resetPassword" class="sub-menu-item">
                            <el-icon><EditPen /></el-icon>
                            <span>重置密码</span>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-scrollbar>
            <div class="aside-footer">
                <el-tooltip content="系统设置" placement="right" :disabled="!isCollapse">
                    <el-button class="setting-button" circle>
                        <el-icon><Setting /></el-icon>
                    </el-button>
                </el-tooltip>
            </div>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container class="main-container">
            <!-- 头部区域 -->
            <el-header class="header-container">
                <div class="header-left">
                    <!-- 控制菜单栏的收放 -->
                    <div class="collapse-button" @click="changeCollapse">
                        <el-icon size="20">
                            <Expand v-if="isCollapse" />
                            <Fold v-else />
                        </el-icon>
                    </div>
                    <div class="breadcrumb-container">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/admin/home' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>{{ router.currentRoute.value.meta.name }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </div>
                <div class="header-right">
                    <div class="date-time">
                        <div class="time">{{ currentTime }}</div>
                        <div class="date">{{ currentDate }}</div>
                    </div>
                    <div class="notification">
                        <el-badge :value="3" class="notification-badge">
                            <el-button class="notification-button" circle>
                                <el-icon><BellFilled /></el-icon>
                            </el-button>
                        </el-badge>
                    </div>
                    <el-dropdown placement="bottom-end" @command="handleCommand" class="user-dropdown">
                        <div class="user-info">
                            <el-avatar :src="userInfo.info.userPie ? userInfo.info.userPie : avatar" class="user-avatar" />
                            <div class="user-details" v-if="!isCollapse">
                                <div class="user-name">{{ userInfo.info.nickname }}</div>
                                <div class="user-role">{{ userInfo.info.username === 'admin' ? '系统管理员' : '普通员工' }}</div>
                            </div>
                            <el-icon class="dropdown-icon"><CaretBottom /></el-icon>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
                                <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                                <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
                                <el-dropdown-item divided command="login" :icon="SwitchButton">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <!-- 中间区域 -->
            <el-main class="main-content">
                <div class="content-container">
                    <router-view v-slot="{ Component }">
                        <transition name="fade" mode="out-in">
                            <component :is="Component" />
                        </transition>
                    </router-view>
                </div>
            </el-main>
            <!-- 底部区域 -->
            <el-footer class="footer-container">
                <div class="footer-content">
                    <div class="copyright">© 2025 超市库存管理系统 版权所有</div>
                    <div class="version">Version 1.0.0</div>
                </div>
            </el-footer>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
}

// 左侧菜单样式
.aside-container {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a237e 0%, #283593 100%);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    transition: width 0.3s ease;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.aside-logo {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    .logo-image {
        height: 36px;
        margin-right: 10px;
    }
    
    .logo-small {
        height: 32px;
        margin: 0 auto;
    }
    
    .logo-text {
        color: white;
        font-size: 18px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.el-menu-vertical {
    border-right: none;
    
    .menu-item {
        height: 50px;
        line-height: 50px;
        margin: 4px 0;
        border-radius: 4px;
        margin-left: 8px;
        margin-right: 8px;
        
        &:hover, &.is-active {
            background: rgba(255, 255, 255, 0.1) !important;
        }
        
        &.is-active {
            color: #ffffff !important;
            font-weight: 600;
        }
    }
    
    .menu-sub {
        .el-sub-menu__title {
            height: 50px;
            line-height: 50px;
            margin: 4px 0;
            border-radius: 4px;
            margin-left: 8px;
            margin-right: 8px;
            
            &:hover {
                background: rgba(255, 255, 255, 0.1) !important;
            }
        }
    }
    
    .sub-menu-item {
        height: 50px;
        line-height: 50px;
        margin: 4px 0;
        
        &:hover, &.is-active {
            background: rgba(255, 255, 255, 0.05) !important;
        }
        
        &.is-active {
            color: #ffffff !important;
            font-weight: 600;
        }
    }
}

.aside-footer {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    
    .setting-button {
        background: transparent;
        border: none;
        color: #a0aec0;
        
        &:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.1);
        }
    }
}

// 右侧主区域样式
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f5f7fa;
}

// 头部区域样式
.header-container {
    height: 64px !important;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 5;
}

.header-left {
    display: flex;
    align-items: center;
    
    .collapse-button {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        
        &:hover {
            background-color: #f5f7fa;
        }
    }
    
    .breadcrumb-container {
        margin-left: 16px;
        font-size: 14px;
    }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    
    .date-time {
        text-align: right;
        margin-right: 10px;
        
        .time {
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }
        
        .date {
            font-size: 12px;
            color: #666;
        }
    }
    
    .notification {
        margin-right: 10px;
        
        .notification-button {
            background: transparent;
            border: none;
            font-size: 20px;
            color: #666;
            
            &:hover {
                color: #1a237e;
            }
        }
    }
    
    .user-dropdown {
        cursor: pointer;
        
        .user-info {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            border-radius: 40px;
            transition: all 0.3s;
            
            &:hover {
                background-color: #f5f7fa;
            }
            
            .user-avatar {
                width: 40px;
                height: 40px;
                border: 2px solid #fff;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            
            .user-details {
                margin: 0 10px;
                
                .user-name {
                    font-size: 14px;
                    font-weight: 600;
                    color: #333;
                }
                
                .user-role {
                    font-size: 12px;
                    color: #666;
                }
            }
            
            .dropdown-icon {
                color: #999;
                font-size: 12px;
            }
        }
    }
}

// 主内容区域样式
.main-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.content-container {
    background-color: transparent;
    min-height: calc(100% - 40px);
}

// 底部区域样式
.footer-container {
    height: 50px !important;
    background-color: #fff;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 12px;
    color: #999;
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>